<template>
  <div class="admin-page">
    <div class="insert-data">
      <el-button type="primary" @click="insertAdmin">增加管理员</el-button>
    </div>
    <div class="admin-list">
      <el-table :data="userList" style="width: 100%">
        <el-table-column label="序号" width="200" prop="id">
        </el-table-column>
        <el-table-column label="管理员名称" width="200" prop="user_name">
        </el-table-column>
        <el-table-column label="管理员状态" width="200" prop="user_name">
          <template slot-scope="scope">
            <span v-if="scope.row.status === '2'">普通管理员</span>
            <span v-else>超级管理员</span>
          </template>
        </el-table-column>
        <el-table-column label="申请时间" width="200" prop="user_name">
          <template slot-scope="scope">
            <span>{{scope.row.time}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="right">
          <template slot-scope="scope">
            <el-button size="mini" type="info" @click="handleEdit(scope.row)">
              编辑
            </el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog class="form-el-dialog" title="添加管理员" :visible.sync="dialogVisible" width="60%">
      <greate-admin-form :dialog-visible.sync="dialogVisible" :user-item="userItem">
      </greate-admin-form>
    </el-dialog>
  </div>
</template>
<script>
import moment from 'moment';
import AdminApi from '@/api/admin';
import GreateAdminForm from './components/GreateAdminForm.vue';

export default {
  name: 'Admin',
  components: {
    GreateAdminForm,
  },
  data() {
    return {
      userList: [],
      dialogVisible: false,
      userItem: null,
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      AdminApi.getList()
        .then((data) => {
          if (data.data.length > 0) {
            const arr = data.data.map((item) => {
              const obj = item;
              obj.time = moment(item.time * 1000).format('YYYY-MM-DD hh:mm:ss');
              return obj;
            });
            this.userList = arr;
          } else {
            this.userList = [];
          }
        })
        .catch(() => {
          this.userList = [];
        });
    },
    insertAdmin() {
      this.dialogVisible = true;
    },
    handleEdit(item) {
      this.userItem = item;
      this.dialogVisible = true;
    },
    handleDelete(data) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          AdminApi.delUser(data.id)
            .then((res) => {
              if (res.data) {
                this.$message({
                  type: 'success',
                  message: '删除成功!',
                });
                this.getList();
              } else {
                this.$message({
                  type: 'info',
                  message: '删除失败!',
                });
              }
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '删除失败!',
              });
            });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          });
        });
    },
  },
  watch: {
    dialogVisible() {
      if (!this.dialogVisible) {
        this.userItem = null;
        this.getList();
      }
    },
  },
};
</script>

<style  lang="scss" scoped>
.admin-page {
  width: 100%;
  padding: 15px;
  .insert-data {
    padding:10px 10px;
    margin-bottom: 10px;
    background-color: #ffffff;
  }
  .admin-list{
    background-color: #ffffff;
    padding:10px;
    margin-bottom: 10px;
  }
  .form-el-dialog {
    /deep/ .el-dialog__header {
      border-bottom: 1px solid #ccc;
    }
  }
}
</style>
